<template>
  <div class="wrap">
    <div class="pay-root" v-if="machineStatus === 0">
      <div class="tips">
        <p>本次服务需支付<i>0.01</i>元</p>
        <p>您将有<i>15</i>分钟洗车时间</p>
      </div>
      <div>
        <h2 class="intro-title"> 一般洗车流程</h2>
        <div class="wash-list">
          <div>
            <p>冲清水</p>
          </div>
          <img src="~@/assets/images/arrow.png" alt="">
          <div>
            <p>冲泡沫</p>
          </div>
          <img src="~@/assets/images/arrow.png" alt="">
          <div>
            <p>使用洗车刷洗车</p>
          </div>
          <img src="~@/assets/images/arrow.png" alt="">
          <div>
            <p>冲清水</p>
          </div>
          <img src="~@/assets/images/arrow.png" alt="">
          <div>
            <p>使用洗车布擦干车身</p>
          </div>
          <img src="~@/assets/images/arrow.png" alt="">
          <div>
            <p>车内除尘</p>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="server">
        <div class="pay-btn" :class="{disabled: paying}" @touchend="addNewOrder">
          {{paying ? '正在支付' : '确认'}}
        </div>
      </div>
    </div>

    <div v-if="machineStatus !== 0" class="wash-root">
      <div class="wash-box">
        <div v-if="machineStatus === 1" class="wash-content">
          <img src="~@/assets/images/working.png" alt="" />
          <div class="work-status">设备工作中…</div>
          <div class="work-tips">请直接使用</div>
        </div>
        <div v-if="machineStatus === 2" class="wash-content">
          <img src="~@/assets/images/broken.png" alt="" />
          <div class="work-status">设备不可用…</div>
          <div class="work-tips error">故障信息</div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="">
        <div class="action-btn">
          知道了
        </div>
      </div>
      <!-- <p class="wash-txt">洗车中</p> -->
    </div>
  </div>  
</template>

<script>
import api from '@/api'

export default {
  name: 'Pay',

  data () {
    return {
      // formData: '<form name="punchout_form" method="post" action="https://openapi.alipaydev.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=OL%2FVR9farx%2Boa%2FTbHXaWoscKYQLWAD3lnIi1vvtg%2Fd%2F5%2FlbEWKX%2Bfr%2B7NaYRtXP7ifmPBYbkf9wfNOWPl%2BMSZmYqRCeyn6xs4mV9QMZ6PA6Z6EQR9cccKMujZY7wJIDBhwCwoYdkEqVlfxuvJAhJiXnQUsOvdz12IlM6Pfrs9rTJXjZBzTRp4TuW%2B%2BWk7Aet7W487JFImdT3lcDNncBGcBxfY0AfsBqc9OUC1tGudsE5RD95mEv2w4Ozglrzgv2QkWBZTSbnqizuEL2jE5ri1T86xYRwJhyTlNdvGwQXcD41FGhHrNrg6Zvc2fwatwCAZ3vZHthF9xk1JhCQBpuHUg%3D%3D&return_url=http%3A%2F%2Ftest.plugin.xlink.cn%2Fv2%2Ftradecenter%2Falipay%2F2016081900289258%2Fresult&notify_url=http%3A%2F%2Ftest.plugin.xlink.cn%2Fv2%2Ftradecenter%2Falipay%2F2016081900289258%2Fgateway&version=1.0&app_id=2016081900289258&sign_type=RSA2&timestamp=2017-09-28+13%3A57%3A25&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json"><input type="hidden" name="biz_content" value="{&quot;body&quot;:&quot;wap test&quot;,&quot;out_trade_no&quot;:&quot;201709281506578245647&quot;,&quot;product_code&quot;:&quot;QUICK_WAP_PAY&quot;,&quot;subject&quot;:&quot;xlink pay test&quot;,&quot;timeout_express&quot;:&quot;100m&quot;,&quot;total_amount&quot;:&quot;0.01&quot;}"><input type="submit" value="立即支付" style="display:none" ></form>',
      environment: '', // 当前浏览器环境
      machineStatus: 0, // 0,1,2
      paying: false,
      deviceId: '',
      app_id: '11', // 支付宝应用 ID
      seller_id: '22', // 收款支付宝账号对应的支付宝唯一用户号
      orderInfo: { // 新增订单返回信息
        orderId: '33', // 订单 ID
        deviceId: '44',
        trade_no: '55', // 交易流水号
        sign: '66', // 签名串
        amount: '77', // 消费金额
        subject: '', // 订单名称
        remark: '' // 备注
      }
    }
  },
  computed: {
    timestamp () { // 前台回跳的时间，格式"yyyy-MM-dd HH:mm:ss"
      let date = new Date()
      let seperator1 = '-'
      let seperator2 = ':'
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds()
      return currentdate
    }
  },
  mounted () {
    this.$Loading.hide()
    // alert(JSON.stringify(window.navigator.userAgent))
    this.judgeEnvironment()
  },
  methods: {
    judgeEnvironment () {
      // 判断当前浏览器类型
      let userAgent = navigator.userAgent.toLowerCase()
      // alert(userAgent)
      if (/Alipay/im.test(userAgent)) {
        this.environment = 'alipay' // 支付宝内置浏览器
      } else if (/MicroMessenger/im.test(userAgent)) {
        this.environment = 'wechat' // 微信内置浏览器
      } else {
        this.environment = 'others' // 其他浏览器
      }
      // alert(this.environment)
    },
    // 新增订单
    async addNewOrder () {
      if (this.paying) return
      // let params = {
      //   corpId: '123',
      //   deviceId: '123',
      //   subject: '名称',
      //   remark: '备注'
      // }
      try {
        let res = await api.order.addNewOrder()
        console.log(res)
        // this.formData = res.data
        if (this.environment === 'alipay') {
          let formDiv = document.createElement('div')
          formDiv.innerHTML = res.data
          document.body.appendChild(formDiv)
          document.forms[0].submit()
        } else {
          alert('该支付暂时仅支持支付宝')
        }
        // this.jump()
      } catch (err) {
        console.log(err)
      } finally {
        this.paying = false
      }
    },
    jump () {
      // 跳转支付宝逻辑
      // 测试
      const a = document.createElement('div')
      a.innerHTML = this.formData
      document.body.appendChild(a)
      document.forms[0].submit()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrap {
    height 100%
    width 100%
  }
  .pay-root {
  	width 100%
  	height 100%
  	background #fff
		text-align: center
		.tips {
			font-size 0.6rem
			margin-top 1rem
			margin-bottom 0.6rem
			i {
				color red
			}
		}
		.intro-title {
			font-size 0.4rem
			margin-bottom 0.3rem
		}
		.wash-list {
			margin-bottom 1rem
			p {
				display inline-block
				font-size 0.4rem
				line-height 1rem
				color #818181
				border 0.02rem solid #DFDEDF
				border-radius 0.2rem
				width 5rem
			}
			img {
				width 15px
				height 15px
			}	
		}
  	.info {
  		width: 80%
  		height 50%
  		box-sizing border-box
  		margin 0 auto
  		border-bottom 0.02rem solid black
  		padding 0 5%
  		.balance-box,.device-box {
  			display flex
  			justify-content space-between
  			align-items center
  			padding-top 25%
  			font-size 0.5rem
  			.balance-money,.device-number {
  				color rgba(150,150,150,1)
				}
			}
		}
  	.server {
  		display flex
  		justify-content space-between
  		align-items center
  		// width 70%
  		// height 50%
  		margin 0 auto
  		position relative
			.time-box,.price-box {
				font-size 0.5rem
				margin-top -30%
				text-align center
				.time-txt,.price-txt {
					margin-bottom 30%
				}
				.time-choose {
					line-height 0.8rem
					font-size 0.8rem
					border none
					border-top 0.02rem solid rgba(228,228,228,1)
					border-bottom 0.02rem solid rgba(228,228,228,1)
					appearance none
				}
			}
			.pay-btn {
				width 70%
				height 1.2rem
				color #000
				text-align center
				line-height 1.2rem
				font-size 0.5rem
				font-weight bold
				position absolute
				left 15%
				top 60%
				background #FFE600
				&.disabled {
					opacity 0.5
				}
			}
		}
	}
  .wash-root {
    width 100%
    height 100%
    text-align center
    .wash-txt {
      text-align center
      width 80%
      margin 10% auto
      font-size 0.6rem
    }  
    .wash-box {
      width 60%
      height 70%
      margin 30% auto 0
      vertical-align middle
      .error {
        color red
      }  
      .work-status {
        font-size 20px
      }  
      .work-tips {
        font-size 16px
      }
      img {
        width 60%
        margin-bottom 80px 
      }
    }
    .action-btn {
      width 70%
      height 1.2rem
      margin 0 auto
      color #000
      text-align center
      line-height 1.2rem
      font-size 0.5rem
      font-weight bold
      background #FFE600
      &.disabled {
        opacity 0.5
      }    
    }    
  }      
</style>
